<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            width: 560px;
            line-height: 40px;
            background-color: #000;
            color: #fff;
            margin: auto;
        }

        li {
            width: 80px;
            text-align: center;
        }
    </style>
</head>

<body>

    <p>
        <span id="prev">&lt;</span>
        <span id="next">&gt;</span>
    </p>

    <ul>
        <li>星期一</li>
        <li>星期er</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
    <ul id="list"></ul>


    <script>

        // 分析日历
        //   上个月的部分天数 + 本月所有的天数 + 下一个的天数  = 42
        //   三个数组  

        var date = new Date() ;    // 全局变量

        ff(date);


        // 上翻页
        var oPrev = document.getElementById('prev') ;
        oPrev.onclick = function() {
            date.setDate(-1) ;   // 2022.6.29
            ff(date) ;
            // 调用  显示年月的函数
        }



        // 求本月的天数
        function f2(d) {
            var date = new Date(d);
            // 月份推到下个月
            date.setDate(32);
            // 日期推到弟0天
            date.setDate(0);
            var maxDay = date.getDate();
            var arr = [];
            for (var i = 1; i <= maxDay; i++) {
                arr.push(i);
            }
            return arr
        }


        // var res = getNowDays() ;
        // console.log(res);


        // 求上个月的天数
        function f1(d) {
            var date = new Date(d);

            // 算出本月的第一天是星期几？
            date.setDate(1);
            var week = date.getDay();
            console.log(week);

            // 日期设置到第0天
            date.setDate(0);
            var maxDay = date.getDate();

            var arr = [];
            // 上个月所显示的第一天 = 上个月的最后一天 - week + 2
            for (var i = maxDay - week + 2; i <= maxDay; i++) {
                arr.push(i);
            }
            return arr
        }

        // getPrevDays();



        function f3(d) {
            // 上个月的天数
            var arr1 = f1(d);
            var arr2 = f2(d);
            console.log(arr1, arr2);

            var arr = [];
            for (var i = 1; i <= 42 - arr1.length - arr2.length; i++) {
                arr.push(i);
            }
            // console.log(arr);
            return arr
        }



        // 渲染整个Li  
        function ff(d) {
            var arr1 = f1(d);
            var arr2 = f2(d);
            var arr3 = f3(d);

            var html = '';
            for (var i in arr1) {
                html += `<li style="color:gray;">${arr1[i]}</li>`
            }
            for (var i in arr2) {
                html += `<li style="color:red;">${arr2[i]}</li>`
            }
            for (var i in arr3) {
                html += `<li style="color:gray;">${arr3[i]}</li>`
            }

            var oUl = document.getElementById('list');
            oUl.innerHTML = html;
        }

    </script>

</body>

</html>